home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Dynamic Content / scrollable-content.izs < prev    next >
Text File  |  2005-09-01  |  6KB  |  120 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Scrollable content
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>This is a cool script that allows you to compact any content and confine it within a scrollable mini "window" Save valuable document space while making your page more "interactive", all at the same time! This script uses two different techniques- one for IE, one for NS- to create the scrollable window. Scrollbars will be available to IE 4 users to scroll the window, while NS users will need to use the "up" and "down" buttons instead (since NS does not support the adding of scrollbars to contents). 
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>dynamic content<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <ilayer name="scroll1" width=170 height=150 clip="0,0,170,150">
  16. <layer name="scroll2" width=170 height=150 bgColor="lightyellow">
  17. <div id="scroll3" style="width:170px;height:150px;background-color:lightyellow;overflow:scroll">
  18. <big>T</big>his is a cool script that allows you to compact any content and confine it within a scrollable mini "window" Save valuable document space while making your page more "interactive", all at the same time! This script uses two different techniques- one for IE, one for NS- to create the scrollable window. Scrollbars will be available to IE 4 users to scroll the window, while NS users will need to use the "up" and "down" buttons instead (since NS does not support the adding of scrollbars to contents). 
  19. </div>
  20. </layer>
  21. </ilayer>
  22.  
  23. <script>
  24.  
  25. /***********************************************
  26. * Scrollable content Script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  27. * This notice must stay intact for use
  28. * Visit http://www.dynamicdrive.com/ for full source code
  29. ***********************************************/
  30.  
  31. var nsstyle='display:""'
  32. if (document.layers)
  33. var scrolldoc=document.scroll1.document.scroll2
  34. function up(){
  35. if (!document.layers) return
  36. if (scrolldoc.top<0)
  37. scrolldoc.top+=10
  38. temp2=setTimeout("up()",50)
  39. }
  40. function down(){
  41. if (!document.layers) return
  42. if (scrolldoc.top-150>=scrolldoc.document.height*-1)
  43. scrolldoc.top-=10
  44. temp=setTimeout("down()",50)
  45. }
  46.  
  47. function clearup(){
  48. if (window.temp2)
  49. clearInterval(temp2)
  50. }
  51.  
  52. function cleardown(){
  53. if (window.temp)
  54. clearInterval(temp)
  55. }
  56.  
  57. </script>
  58. <br><span style="display:none" style=&{nsstyle};><a href="#" onMousedown="up()"
  59. onMouseup="clearup()" onClick="return false" onMouseout="clearup()">Up</a> | <a href="#"
  60. onMousedown="down()" onMouseup="cleardown()" onClick="return false"
  61. onMouseout="cleardown()">Down</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=0;return false">Top</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false">Bottom</a></span>
  62. <!-- Configuring the script: The width of the "window" is represented by the value 170, and the height, 150. To alter the dimensions, change ALL instances of 170 to another value, and the same for 150 (just do a search-and-replace). You can also give the window a different background color. Just change "yellow" to another color name.-->
  63. <!-- END OF SCRIPT -->
  64. <!/SCRIPT>
  65.  
  66. <!PREVIEW>
  67. <!-- START OF SCRIPT -->
  68.  
  69. <ilayer name="scroll1" width=170 height=150 clip="0,0,170,150">
  70. <layer name="scroll2" width=170 height=150 bgColor="lightyellow">
  71. <div id="scroll3" style="width:170px;height:150px;background-color:lightyellow;overflow:scroll">
  72. <big>T</big>his is a cool script that allows you to compact any content and confine it within a scrollable mini "window" Save valuable document space while making your page more "interactive", all at the same time! This script uses two different techniques- one for IE, one for NS- to create the scrollable window. Scrollbars will be available to IE 4 users to scroll the window, while NS users will need to use the "up" and "down" buttons instead (since NS does not support the adding of scrollbars to contents). 
  73. </div>
  74. </layer>
  75. </ilayer>
  76.  
  77. <script>
  78.  
  79. /***********************************************
  80. * Scrollable content Script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  81. * This notice must stay intact for use
  82. * Visit http://www.dynamicdrive.com/ for full source code
  83. ***********************************************/
  84.  
  85. var nsstyle='display:""'
  86. if (document.layers)
  87. var scrolldoc=document.scroll1.document.scroll2
  88. function up(){
  89. if (!document.layers) return
  90. if (scrolldoc.top<0)
  91. scrolldoc.top+=10
  92. temp2=setTimeout("up()",50)
  93. }
  94. function down(){
  95. if (!document.layers) return
  96. if (scrolldoc.top-150>=scrolldoc.document.height*-1)
  97. scrolldoc.top-=10
  98. temp=setTimeout("down()",50)
  99. }
  100.  
  101. function clearup(){
  102. if (window.temp2)
  103. clearInterval(temp2)
  104. }
  105.  
  106. function cleardown(){
  107. if (window.temp)
  108. clearInterval(temp)
  109. }
  110.  
  111. </script>
  112. <br><span style="display:none" style=&{nsstyle};><a href="#" onMousedown="up()"
  113. onMouseup="clearup()" onClick="return false" onMouseout="clearup()">Up</a> | <a href="#"
  114. onMousedown="down()" onMouseup="cleardown()" onClick="return false"
  115. onMouseout="cleardown()">Down</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=0;return false">Top</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false">Bottom</a></span>
  116. <!-- Configuring the script: The width of the "window" is represented by the value 170, and the height, 150. To alter the dimensions, change ALL instances of 170 to another value, and the same for 150 (just do a search-and-replace). You can also give the window a different background color. Just change "yellow" to another color name.-->
  117. <!-- END OF SCRIPT -->
  118. <!/PREVIEW>
  119.  
  120. <!RELATED>NONE<!/RELATED>